<template>
<div>
  <el-row :gutter="10">
    <el-col :span="16">
      <el-tag>线索ID：{{id}}</el-tag>
      <el-descriptions append-to-body class="margin-top" title="带边框列表" border>
<!--        <template slot="extra">-->
<!--          <el-button type="primary" size="small">操作</el-button>-->
<!--        </template>-->
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            创建时间
          </template>
          {{ form.createTime }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-mobile-phone"></i>
            手机号
          </template>
          {{ form.phone }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-location-outline"></i>
            渠道来源
          </template>
          苏州市
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-tickets"></i>
            线索归属
          </template>
          <el-tag size="small">{{form.owner}}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-office-building"></i>
            活动信息
          </template>
          江苏省苏州市吴中区吴中大道 1188 号
        </el-descriptions-item>
      </el-descriptions>
      <el-divider></el-divider>
      <el-row type="flex" justify="end">
        <el-col :span="6">
          <el-button v-if="(form.status==1 || form.status==2) && form.falseCount<3" size="mini" type="danger" @click="handleFalseClue">伪线索</el-button>
          <el-button v-if="(form.status==1 || form.status==2)" type="success" @click="handleTransform" size="mini">转商机</el-button>
        </el-col>
      </el-row>
      <el-divider></el-divider>
      <el-form ref="form" :disabled="disabled" :model="form" :rules="rules" label-width="100px">
        <el-row :gutter="5">
          <el-col :span="12">
            <el-form-item label="客户姓名" prop="name">
              <el-input v-model="form.name" type="textarea" placeholder="请输入客户姓名" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="性别" prop="sex">
              <el-select placeholder="请输入性别" clearable v-model="form.sex">
                <el-option v-for="item in dict.type.sys_user_sex" :label="item.label" :value="item.value" :key="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="5">
          <el-col :span="12">
            <el-form-item label="年龄" prop="age">
              <el-input v-model="form.age" type="number" placeholder="请输入年龄" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="微信号" prop="weixin">
              <el-input v-model="form.weixin" type="textarea" placeholder="请输入微信号" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="5">
          <el-col :span="12">
            <el-form-item label="QQ号" prop="qq">
              <el-input v-model="form.qq" placeholder="请输入QQ号" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="意向等级" prop="level">
              <el-select placeholder="请输入意向等级" clearable v-model="form.level">
                <el-option v-for="item in dict.type.clues_level" :label="item.label" :value="item.value" :key="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="5">
          <el-col :span="12">
            <el-form-item label="意向学科" prop="subject">
              <el-select placeholder="请输入意向学科" clearable v-model="form.subject">
                <el-option v-for="item in dict.type.course_subject" :label="item.label" :value="item.value" :key="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="下次跟进时间" prop="nextTime">
              <el-date-picker
                v-model="form.nextTime"
                type="date"
                placeholder="下次跟进时间">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="5">
          <el-col :span="12">
            <el-form-item label="跟进记录" prop="type">
              <el-input v-model="form.record" placeholder="请输入跟进记录" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-button v-if="(form.status==1 || form.status==2) && !disabled" type="primary" @click="onSubmit" size="mini">保存</el-button>
            <el-button type="primary" @click="$emit('cancel')" size="mini">取消</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-col>
    <el-col :span="8">
      <track-list :id="id" :key="trackListKey"></track-list>
    </el-col>
  </el-row>
  <false-clue ref="falseClueDialog" @success="trackListKey++"></false-clue>
</div>
</template>

<script>
import {getClue} from '@/api/crm/clue'
import TrackList from "@/views/crm/clue/components/track-list";
import FalseClue from "@/views/crm/clue/components/false-clue"
import {addClueTrack,transformBusiness} from '@/api/crm/clueTrack'
export default {
  name: "track-index",
  components:{TrackList,FalseClue},
  props:{
    clueId:{
      type:[String,Number], // 类型可以是String类型，数值类型
    },
    view:{type:Boolean},
  },
  dicts:['sys_user_sex','clues_level','course_subject'],
  data(){
    return{
      id:this.clueId,
      form:{},
      rules:{},
      trackListKey:0,
      disabled:false,
    }
  },
  //在子组件里面监视外面值的变化
  watch:{
    clueId(newValue,oldValue){
      this.id =newValue
      this.getList()
    },
    view:{
      handler:function (newValue,oldValue) {
        this.disabled=newValue
      },
      immediate:true // 第一次变化就要触发
    }
  },
  created() {
    this.getList()
  },
  methods:{
    getList(){
      getClue(this.id).then(resp=>{
        this.form=resp.data
      })
      this.trackListKey++;
    },
    onSubmit(){
      addClueTrack(this.form).then(req=>{
        this.$message.success("操作成功")
        this.getList()
        // 通知父组件
        this.$emit("success")
      })
    },
    handleFalseClue(){
      this.$refs.falseClueDialog.open=true
      this.$refs.falseClueDialog.id=this.id
      this.$refs.falseClueDialog.resetForm()
    },
    handleTransform(){
      this.$msgbox.confirm(`确定转换线索${this.id}到商机吗？`).then(()=>{
        transformBusiness({id:this.id,record:'转商机'}).then(req=>{
          this.handleSuccess()
        })
      })
    },
    handleSuccess(){
      this.$message.success("操作成功")
      this.getList()
      this.$emit("success")
    }
  },
}
</script>

<style scoped>

</style>
